<template>
    <!-- <el-button  @click="openHandler">预览</el-button> -->
    <el-dialog @close="closeHandler" v-model="maskObj.flag" title="预览">
        <iframe  sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups" 
            :src="maskObj.url"
            frameborder="0"
            style=" z-index: 1000;height:560px;width:100%">
        </iframe>
    </el-dialog>
</template>
<script lang="ts" setup>
import {shallowReactive } from 'vue'
let maskObj = shallowReactive({
    flag: false,
    url:''
})
const openHandler = () => { 
    maskObj.url = '', //你的地址
    maskObj.flag = true;
    // 在预览的时候，可以判断一个文件的类型，不符合要求的类型不支持预览。
    // 在预览视频的时候，关闭弹窗的时候也应该把视频的值清空。否者视频会一直播放的
}

const closeHandler = () => { 
    maskObj.url =''//清空值
    maskObj.flag = false;
}
</script>
